﻿<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta htttp-equiv="Content-Type" content="text/html" charset="UTF-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="Bookmark" href="" >
    <link rel="Shortcut Icon" href="" />
    <style type="text/css">
        table{
            width: 100%;
        }

        table thead {
            font-size: 15px;
            background-color: #e6e8eb;
            border-bottom: 3px solid #fff;
        }

        table thead tr th {
            font-weight: bold;
            text-align: left;
            padding: 12px 0 12px 5px;
        }
    </style>
</head>
<body>
<div class="treeTable">
    <table>
        <thead>
        <tr>
            <th width="30%">Name</th>
            <th width="55%">Description</th>
            <th width="15%">Value</th>
        </tr>
        </thead>
    </table>
    <div class="tbLayer">
        <table id="TT-demo">
            <tbody>
            <!--<tr data-tt-id="a" data-tt-branch='true'>-->
            <!--<td width="30%"><i class="icon-do"></i>1: column 1</td>-->
            <!--<td width="55%">1: column 2</td>-->
            <!--<td width="15%">Ok</td>-->
            <!--</tr>-->
            <!--<tr data-tt-id="b" data-tt-branch='true'>-->
            <!--<td width="30%"><i class="icon-do"></i>1: column 1</td>-->
            <!--<td width="55%">1: column 2</td>-->
            <!--<td width="15%">Ok</td>-->
            <!--</tr>-->
            </tbody>
        </table>
    </div>
</div>
<!-- treeTable End -->

<!-- treeTableTmpl Begin -->
<script type="text/jquery-tmpl" id="treeTableTmpl">
<tr data-tt-id="${ID}" data-tt-branch='true'>
    <td width="30%"><i class="${icon}"></i>${childData[0]}</td>
    <td width="55%">${childData[1]}</td>
    <td width="15%">${childData[2]}</td>
</tr>
</script>
<!-- treeTableTmpl End -->

<script type="text/javascript">

    $(function() {
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }

        var nodeId = $.getUrlParam("easyTreeId");

        var ip = $.getUrlParam("ip");

        var mainH = $(".mainLayer").height();

        $(".treeTable .tbLayer").css({"height": mainH - 72, "overflow-y": "auto"});

        $.ajax({
            type: "POST",
            url: "/iec61850/tableParent",
            data: {"disType": "table", "id": nodeId, "ip": ip},
            dataType: "json",
            success: function (d) {
                var item = d.data;
                $("#TT-demo tbody").empty();
                $("#treeTableTmpl").tmpl(item).appendTo("#TT-demo tbody");
                // initialize treeTable
                $("#TT-demo").treetable({
                    expandable: true,
                    onNodeExpand: nodeExpand,
                    onInitialized: function(){
                        $.ajax({
                            type: "POST",
                            url: "/iec61850/table?disType=table&id=" + nodeId + "&ip=" + ip,
                            //url: "treeTable.json",
                            dataType: "json",
                            success: function (d) {
                                var item = d.data
                                var childNodes = item.nodeID[nodeId];
                                if(childNodes == null){//不存在子节点
                                    //alert(1);
                                    var $tr = $("#TT-demo").find("[data-tt-id='" + nodeId + "']");
                                    $tr.attr("data-tt-branch","false");// data-tt-branch 标记当前节点是否是分支节点，在树被初始化的时候生效
                                    $tr.find("span.indenter").html("");// 移除展开图标
                                    return;
                                }
                            }
                        });
                    }
                    //onNodeCollapse: nodeCollapse
                });

                // Highlight a row when selected
                $("#TT-demo tbody").on("mousedown", "tr", function () {
                    $(".selected").not(this).removeClass("selected");
                    $(this).toggleClass("selected");
                });


                // expand node with ID "1" by default
                //$("#TT-demo").treetable("reveal", 'b');


                function nodeExpand() {
                    var mainH = $(".mainLayer").height();

                    $(".treeTable .tbLayer").css({"height": mainH - 72, "overflow-y": "auto"});
                    getNodeViaAjax(this.id);
                    //alert(this.id);
                }


                function nodeCollapse() {
                    // alert("Collapsed: " + this.id);
                }


                function getNodeViaAjax(parentNodeID) {
                    $("#loadingImage").show();
                    //alert(1);
                    // ajax should be modified to only get childNode data from selected nodeID
                    // was created this way to work in jsFiddle
                    $.ajax({
                        type: "POST",
                        url: "/iec61850/table",
                        //url: "treeTable.json",
                        data: {"disType": "table", "id": parentNodeID, "ip": ip},
                        dataType: "json",
                        success: function (d) {
                            var item = d.data;
                            $("#loadingImage").hide();

                            var childNodes = item.nodeID[parentNodeID];
                            //console.log(parentNodeID);
                            //console.log(childNodes);
                            if (childNodes) {
                                var parentNode = $("#TT-demo").treetable("node", parentNodeID);

//                                if(childNodes == null){//不存在子节点
//                                    alert(1);
//                                    var $tr = $("#TT-demo").find("[data-tt-id='" + nodeId + "']");
//                                    $tr.attr("data-tt-branch","false");// data-tt-branch 标记当前节点是否是分支节点，在树被初始化的时候生效
//                                    $tr.find("span.indenter").html("");// 移除展开图标
//                                    return;
//                                }

                                for (var i = 0; i < childNodes.length; i++) {
                                    var node = childNodes[i];

                                    var nodeToAdd = $("#TT-demo").treetable("node", node['ID']);

                                    // check if node already exists. If not add row to parent node
                                    if (!nodeToAdd) {
                                        // create row to add
                                        var row = '<tr data-tt-id="' +
                                                node['ID'] +
                                                '" data-tt-parent-id="' +
                                                parentNodeID + '" ';
                                        if (node['childNodeType'] == 'branch') {
                                            row += ' data-tt-branch="true" ';
                                        }

                                        row += ' >';

                                        // Add columns to row
                                        for (var index in node['childData']) {
                                            var data = node['childData'][index];
                                            row += "<td>" + data + "</td>";
                                        }

                                        // End row
                                        row += "</tr>";

                                        $("#TT-demo").treetable("loadBranch", parentNode, row);
                                    }

                                }

                            }
                        },
                        error: function (error) {
                            $("#loadingImage").hide();
                            alert('there was an error');
                        }
                    });
                }

                //treeTable js End
                //treeTable js Begin

            },
            error: function (error) {
                console.log('data error');
            }
        });
    });

</script>
</body>
</html>